Intake form - #24

Corresponding Tickets

(link to notion: https://app.notion.com/p/34a68e2349b280ebbf7dcee7cfd73867?v=34a68e2349b280bc87a2000ca868bce7)

1. Intake form component
2. Intake form controlled inputs
3. Add constraints/validation logic
4. Intake form styling
5. Find + implement library for email and linkedin validation
6. Separate intake form constants
7. Sign up form question changes

SignUp.page.tsx

UI wrapper for signup form and marketing text

• Marketing text taken from current sign up form with a few updates
• Renamed intake to sign up for all components and text
• The month cycle and number of participants may be added as variable in future
• Generated by Github Copilot

SignUpForm.tsx

Public facing sign up form that collects information for user profile and matching preferences

• Converts constants from SignUpFormConfig.ts into options for Mantine select component
• Uses Zod library for email and linkedin url validation
• Defines SignUpFormValues props
• State management for SignUpFormValues, errors, isSubmitting, successMessage, submitError
• Handlers for field changes, industry/role changes (role selection is based on industry), and form submission
• Generated by Github Copilot

Expected Behavior

1. Full name, email, introduction, and matching preference are required fields
2. Email and Linkedin must be valid
3. Introduction, referral source, and anything else to add have character limits
4. Role must match industry before submission. Role cannot be chosen if no industry is selected or no roles in industry
5. Submit: validate, set errors, sets success/fail message accordingly. Contains placeholder API call
6. Fields are keyboard navigable

SignUpFormConfig.ts

Defines constants for SignUpForm.tsx

• MATCHING_PREFERENCES, TALKING_POINTS, INDUSTRIES
• Expecting future updates to constants
• Assistance from Claude

Other Changes

• Fixed naming conventions to match defined
• Remove handle submit from SignUp.page.tsx
• Remove export default
• api/schema.ts defines zod validation schema
• types.ts defines SignUpFormValues

Testing Method

• Run locally
• Submit different inputs
• Print SignUpValues in console

UI Render - Default Form, No Fill, No Submission

Demo

• Title and marketing text
• Form questions
• Placeholder text

UI Render - With Errors

Demo

• Errors for not submitting required fields (Full name, introduction, matching preference)
• Email and linkedin validation errors (email, linkedin)
• Character limit errors (Introduction, referral source, and anything else to add)
• Role doesn't match industry. Happens when you select role, then change industry selection
• Console message for invalid submission

UI Render - Valid Submission

Demo

• Minimum fields for successful submission
• Submit successful message
• Console message for successful submission